<template>
  <div class="allPage">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <!-- <div slot="header" class="clearfix">
            <h4>牛场情况汇总</h4>
          </div> -->
          <div>
            <el-row :gutter="8">
              <el-col :span="12">
                <el-card style="background-color:#fff;" shadow="hover" >
                  <div style="display:flex;justify-content: space-between;">
                    <div>
                        <img src="@/assets/images/shujufenxi2.png" style="width:50px;height:50px">
                    </div>
                    <div style="width:35%">
                      <div style="font-size:14px;font-weight:bold;color:#656">牛只统计</div>
                      <div><span style="font-weight:bold;font-size:26px;color:#9B4AFF">1000</span>头</div>
                    </div>
                    <div style="width:35%;font-size:11px;font-weight:bold;color:#666;line-height:18px">
                      <p>奶牛：600头</p>
                      <p>公牛：50头</p>
                      <p>牛犊：350头</p>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card style="background-color:#fff" shadow="hover" >
                  <div style="display:flex;justify-content: space-between;">
                    <div>
                     <img src="@/assets/images/shujufenxi.png" style="width:50px;height:50px">
                    </div>
                    <div style="width:35%">
                      <div style="font-size:14px;font-weight:bold;color:#656">物资统计</div>
                      <div><span style="font-weight:bold;font-size:26px;color:#E6A23C">充足</span></div>
                    </div>
                    <div style="width:35%;font-size:11px;font-weight:bold;color:#666;line-height:18px">
                      <p>药品数量：<span style="color:#3CD500">充足</span> </p>
                      <p>饲料数量：<span style="color:#3CD500">充足</span></p>
                      <p>耗材情况：<span style="color:#3CD500">正常</span></p>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="8" style="margin-top:8px;margin-bottom: 8px;">
              <el-col :span="12">
                <el-card style="background-color:#fff" shadow="hover" >
                  <div style="display:flex;justify-content: space-between;">
                    <div>
                      <img src="@/assets/images/shujufenxi1.png" style="width:50px;height:50px">
                    </div>
                    <div style="width:35%">
                      <div style="font-size:14px;font-weight:bold;color:#656">奶厅数据</div>
                      <div><span style="font-weight:bold;font-size:26px;color:#3CD500">60k+</span>升</div>
                    </div>
                    <div style="width:35%;position: relative;">
                      <p style="position:absolute;bottom: 0;"><span
                          style="font-size:25px;font-weight:bold;color:#3CD500;">93.6%</span></p>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card style="background-color:#fff" shadow="hover" >
                  <div style="display:flex;justify-content: space-between;">
                    <div>
                      <img src="@/assets/images/guanli.png" style="width:50px;height:50px">
                    </div>
                    <div style="width:35%">
                      <div style="font-size:14px;font-weight:bold;color:#656">牛舍管理</div>
                      <div><span style="font-weight:bold;font-size:26px;color:#53A8FF">100</span>间</div>
                    </div>
                    <div style="width:35%;font-size:25px;font-weight:bold;color:#53A8FF;position: relative;">
                      <p style="position:absolute;bottom: 0;">90.6%</p>
                    </div>
                  </div>
                </el-card>
              </el-col>

            </el-row>
            <el-row :gutter="8" style="margin-bottom: 7px;">
              <el-col :span="8">
                <el-card style="background-color:#fff" shadow="hover" >
                  <div style="text-align:center; font-size:13px;font-weight:bold;color:#666">牛床位数</div>
                  <div style="margin-top:5px;display:flex; justify-content: center;position: relative;">
                    <div><span style="color:#53A8FF;font-size:18px;font-weight:bold;">1500</span>个</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card style="background-color:#fff" shadow="hover" >
                  <div style="text-align:center; font-size:13px;font-weight:bold;color:#666">饲养员人数</div>
                  <div style="margin-top:5px;display:flex; justify-content: center;position: relative;">
                    <div><span style="color:#53A8FF;font-size:18px;font-weight:bold;">30</span>人</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card style="background-color:#fff" shadow="hover" >
                  <div style="text-align:center; font-size:13px;font-weight:bold;color:#666">挤奶工人数</div>
                  <div style="margin-top:5px;display:flex; justify-content: center;position: relative;">
                    <div><span style="color:#53A8FF;font-size:18px;font-weight:bold;">300</span>人</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="8">
              <el-col :span="8">
                <el-card shadow="never" >
                </el-card>
              </el-col>
            </el-row> -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card-top-right" style="height:341px">
          <div slot="header" class="clearfix">
            <h4>快捷导航</h4>
          </div>
          <div class="boxPage">
            <el-row :gutter="8">
              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/employeeData')">
                    <img src="@/assets/images/tongjibaobiao.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      繁殖分析
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/feedingAnalysis')">
                    <img src="@/assets/images/shuju.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      饲养分析
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/dairyAnalysis')">
                    <img src="@/assets/images/kufang.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      奶厅分析
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/salesRecord')">
                    <img src="@/assets/images/icon.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      理化指标
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="8" style="margin-top:7px;margin-bottom:7px">

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/individualMilkProduction')">
                    <img src="@/assets/images/--.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      个体产奶
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/healthAnalysis')">
                    <img src="@/assets/images/dingdantijian.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      健康分析
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/employeeManagement')">
                    <img src="@/assets/images/fentan.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      分摊比例
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" >
                    <img src="@/assets/images/nainiu.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      奶牛管理
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/goodsManagement')">
                    <img src="@/assets/images/sds_di31leisiliaozhongzi.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      饲料管理
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/inboundOutbound')">
                    <img src="@/assets/images/zonghefenxi.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      出入库管理
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/cashCost')">
                    <img src="@/assets/images/nenghaochengben.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      现金成本管理
                    </div>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
                <el-card shadow="hover">
                  <div class="card_inside" @click="$router.replace('/userManagement')">
                    <img src="@/assets/images/yonghu.png" style="width:45px;height:45px;margin:0 auto;">
                    <div class="card_inside_title">
                      用户管理
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top:10px;">
      <el-col :span="12">
        <el-card class="box-card-bottom">
          <!-- <div slot="header" class="clearfix">
            <h4>牛场情况汇总</h4>
          </div> -->
          <div>
            <Breedingstatistics></Breedingstatistics>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card-bottom">
          <div>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-table :data="tableData1" size="mini" border style="width: 100%">
                  <el-table-column type="index" label="序号" align="center" width="50">
                  </el-table-column>
                  <el-table-column prop="date1" label="常用药品" align="center">
                  </el-table-column>
                  <el-table-column prop="date2" label="常见疾病" align="center">
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Breedingstatistics from "@/components/dataSreening/salesData/Breedingstatistics";

import { } from "@/apis/indexNotes.js";
export default {
  name: "indexComponent",
  components: {
    Breedingstatistics
  },
  data() {
    return {
      tableData1: [
        {
          date1: "牛康",
          date2: "乳房炎",
        },
        {
          date1: "阿托品",
          date2: "酮病",
        },
        {
          date1: "糖皮质激素",
          date2: "乳房水肿",
        },
        {
          date1: "抗微生物类药",
          date2: "胎衣不下",
        },
        {
          date1: "抗微生物类药",
          date2: "胎衣不下",
        },
        {
          date1: "抗微生物类药",
          date2: "胎衣不下",
        },
      ],
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
  },
};
</script>

<style scoped>
.allPage {
  padding: 10px;
}

.card_inside {
  display: flex;
  padding: 0;
  justify-content: center;
  cursor: pointer;
  flex-direction: column
}

.card_inside .card_inside_title {
  font-size: 13px;
  color: #aaa;
  text-align: center;
  margin-top: 5px;
}

.table_title {
  margin-bottom: 10px;
  text-align: left;
}

.box-card-bottom {
  width: 100%;
  height: calc(100vh - 470px);
}

/deep/ .el-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  /* color: #303133; */
  transition: .3s;
}

/deep/ .boxPage .el-card__body,
.el-main {
  padding: 10px 0;
}

/deep/ .box-card-top-left .el-card {
  background-color: #F5FAFF;
}

/deep/ .box-card-top-right .el-card__body {
  padding: 9px;
}
</style>